<template>
  <div class="brief-wrap">

    <div class="edit-box">
      <div class="company-box">
        <span class="titles">企业名称：</span>
        <div class="name" v-if="mark == 1">
          <input type="text" class="company" placeholder="请输入企业名称" v-model="company" @blur="inputBlur" maxlength="15"/>
        </div>
        <div class="name" v-else>
          <span class="company" v-html="company"></span>
        </div>
      </div>

      <div class="lend-box">
        <span class="titles">可否借支：</span>
        <van-radio-group v-model="lendType" class="lend-radio" v-if="mark == 2">
          <van-radio :name=2 class="lend" checked-color="#FF8F33" :class="{'active':lendType == 2}">不可借支</van-radio>
          <van-radio :name=1 checked-color="#FF8F33" :class="{'active':lendType == 1}">可借支</van-radio>
        </van-radio-group>

        <van-radio-group v-model="radio" class="lend-radio" v-else>
          <van-radio :name=2 class="lend" checked-color="#FF8F33" :class="{'active':radio == 2}">不可借支</van-radio>
          <van-radio :name=1 checked-color="#FF8F33" :class="{'active':radio == 1}">可借支</van-radio>
        </van-radio-group>
      </div>
    </div>
    <div class="line-box"></div>

    <div class="brief-box">
      <span class="title">企业简介：</span>
      <div class="brief-con">
        <textarea class="brief" v-model="brief" placeholder="请输入企业简介~" maxlength="280"
                  @blur="inputBlur"></textarea>
      </div>
    </div>


    <div class="brief-address">
      <div class="address-box">
        <span class="area">企业地址：</span>
        <popup-picker :data="columnList" v-model="picker" class="address-title" placeholder="请选择区/镇"></popup-picker>
        <img src="../../../images/in.png" class="pic"/>
      </div>
      <div class="address-area">
        <textarea class="address" v-model="address" placeholder="请输入正确的详细地址~" maxlength="30"
                  @blur="inputBlur"></textarea>
      </div>
    </div>

    <div class="brief-pic">
      <span class="pic-title">企业图片：</span>
      <multiple @uploadImg="uploadImg" :itemList="photoList"></multiple>
    </div>

    <div class="btn-box" v-if="mark == 1">
      <button type="button" class="btn" @click="saveMechanism">保&nbsp;存</button>
    </div>

    <div class="btn-box" v-if="mark == 2">
      <button type="button" class="delete" @click="delMechanism">删&nbsp;除</button>
      <button type="button" class="save" @click="saveMechanism">保&nbsp;存</button>
    </div>

  </div>
</template>

<script>
  import {PopupPicker} from 'vux'
  import {convertBase64ToBlob, escape2Html} from "../../../config/util"
  import * as qiniu from 'qiniu-js'
  import {getQiniuToken, queryMechanismList, insertMechanism} from "../../../axios/api"
  import multiple from "../../../components/multiple"
  import town from "../edit/town"

  export default {
    data() {
      return {
        company: "",
        brief: "",
        address: "",
        mechanismAddress: "",
        columnList: town,
        picker: [],
        picture: [],
        photoList: [],
        mark: "",
        mechanismId: "",
        lendType: "",
        radio: 2,
        token: "",
        workId: "",
        type: this.$route.query.type
      }
    },
    mounted() {
      this.mark = this.$route.query.mark;//1新增2修改
      this.mechanismId = this.$route.query.mechanismId;
      this.identity = this.$store.getters.getIdentity;
      this.getQinToken();
      if (this.mark == 2) {
        this.workId = this.$route.query.workId;
        this.queryMechanism();
      }
    },
    methods: {
      inputBlur() {
        window.scrollTo(0, 0);
      },
      getQinToken() {//获取七牛云uploadToken
        let params = {
          "sgin": this.identity
        };
        getQiniuToken(params).then((res) => {
          this.token = res.data;
        });
      },
      queryMechanism() {
        this.$vux.loading.show({
          text: '加载中',
        });
        const params = {
          "sgin": this.identity,
          "mechanismId": this.mechanismId
        };

        queryMechanismList(params).then(res => {
          this.$vux.loading.hide();
          console.log(JSON.stringify(res.data))
          if (res.code == 0) {
            this.company = res.data[0].mechanismName;
            this.lendType = res.data[0].lendStatus == 0 ? 2 : res.data[0].lendStatus;
            this.brief = res.data[0].mechanismDetails;
            //处理地址
            this.mechanismAddress = res.data[0].mechanismAddress;
            if (this.mechanismAddress && this.mechanismAddress.indexOf("镇") != -1) {
              this.picker.push(this.mechanismAddress.split("镇")[0] + "镇");
              this.address = this.mechanismAddress.split("镇")[1];
            } else {
              this.picker.push(this.mechanismAddress.split("区")[0] + "区");
              this.address = this.mechanismAddress.split("区")[1];
            }
            //处理图片
            let pic = res.data[0].mechanismUrl;
            if (pic) {
              let picList = pic.split(",");
              for (let i = 0, length = picList.length; i < length; i++) {
                this.photoList.push(picList[i]);
              }
            }
          }
        });
      },
      uploadImg(obj) {//开始上传图片七牛云
        this.photoList = obj;
        console.log(JSON.stringify(this.photoList) + "=====");
      },
      checkMechanism() {//校验
        if (this.mark == 1) {//新增
          if (this.company == "" || this.company == undefined) {
            this.$vux.toast.text("请输入企业名称", "middle");
            return;
          }
        }
        if (this.brief == '' || this.brief == undefined) {
          this.$vux.toast.text("请输入企业简介", "middle");
          return;
        }
        if (this.mark == 1) {//新增
          if (this.picker.length == 0) {
            this.$vux.toast.text("请选择区/镇", "middle");
            return;
          }
        }
        if (this.address == '' || this.address == undefined) {
          this.$vux.toast.text("请输入正确的详细地址", "middle");
          return;
        }
        return true;
      },
      saveMechanism() {//保存
        if (this.checkMechanism()) {
          this.$vux.loading.show({
            text: '加载中',
          });

          //上传七牛云
          if (this.photoList.length > 0) {
            for (let i = 0, length = this.photoList.length; i < length; i++) {
              if (this.photoList[i].indexOf("http://pic.lanpin123.com/") == -1) {
                let file = convertBase64ToBlob(this.photoList[i]); //Blob 对象，上传的文件
                let key = null; // 上传后文件资源名以设置的 key 为主，如果 key 为 null 或者 undefined，则文件资源名会以 hash 值作为资源名。
                let config = {
                  useCdnDomain: true, //表示是否使用 cdn 加速域名，为布尔值，true 表示使用，默认为 false。
                  region: qiniu.region.z2 // 根据具体提示修改上传地区,当为 null 或 undefined 时，自动分析上传域名区域};
                };
                let putExtra = {
                  fname: "", //文件原文件名
                  params: {}, //用来放置自定义变量
                  mimeType: null //用来限制上传文件类型，为 null 时表示不对文件类型限制；限制类型放到数组里： ["image/png", "image/jpeg", "image/gif"]
                };
                let observable = qiniu.upload(file, key, this.token, putExtra, config);
                observable.subscribe({
                  next: (res) => {//主要用来展示进度
                    let total = res.total;
                  },
                  error: (err) => {//失败报错信息
                    this.$vux.loading.hide();
                    this.$vux.toast.text("图片上传失败，请重试", "middle");
                  },
                  complete: (res) => {//接收成功后返回的信息
                    this.picture.push("http://pic.lanpin123.com/" + res.hash);
                    if (this.photoList.length == this.picture.length) {//图片上传成功
                      this.commonMechanism();
                    }
                  }
                });
              } else {
                this.picture.push(this.photoList[i])
              }

              if (this.photoList.length == this.picture.length) {//有图直接上传
                this.commonMechanism();
              }
            }

          } else {//无图
            this.commonMechanism();
          }
        }
      },
      commonMechanism() {//修改企业信息
        let pic = "";
        if (this.picture.length > 0) {
          pic = this.getText(this.picture);
        }
        let lend = "";
        if (this.mark == 2) {
          lend = this.lendType == 2 ? 0 : this.lendType;
        } else {
          lend = this.radio == 2 ? 0 : this.radio;
        }

        let data = {
          "sgin": this.identity,
          "id": this.mark == 2 ? this.mechanismId : "",
          "mechanismName": this.company,
          "lendStatus": lend,
          "mechanismDetails": this.brief,
          "mechanismAddress": String(this.picker) + this.address,
          "mechanismUrl": pic
        };
        insertMechanism(data).then((res) => {
          this.$vux.loading.hide();
          if (res.code == 0 && res.data != 0) {
            setTimeout(() => {
              if (this.mark == 1) {
                this.$router.push({
                  path: "/choosecompany",
                  query: {"type": this.type, "mechanismId": this.mechanismId}
                });
              } else {
                this.$router.push({
                  path: "/choosecompany",
                  query: {"workId": this.workId, "type": this.type, "mechanismId": this.mechanismId, "flag": 1}
                });
              }
            }, 50);
          } else {
            this.$vux.toast.text(res.msg, "middle");
          }
        });
      },
      getText(arr) {
        let str = "";
        for (let i = 0; i < arr.length; i++) {
          str += arr[i] + ",";
        }
        if (str.length > 0) {
          str = str.substr(0, str.length - 1);
        }
        return str;
      },
      delMechanism() {//删除
        this.$vux.loading.show({
          text: '加载中',
        });
        let data = {
          "sgin": this.identity,
          "id": this.mechanismId,
          "delStatus": 1,
        };
        insertMechanism(data).then((res) => {
          this.$vux.loading.hide();
          if (res.code == 0 && res.data != 0) {
            setTimeout(() => {
              if (this.mark == 1) {
                this.$router.push({
                  path: "/choosecompany",
                  query: {"type": this.type, "mechanismId": this.mechanismId}
                });
              } else {
                this.$router.push({
                  path: "/choosecompany",
                  query: {"workId": this.workId, "type": this.type, "mechanismId": this.mechanismId, "flag": 1}
                });
              }
            }, 50);
          } else {
            this.$vux.toast.text(res.msg, "middle");
          }
        });
      }
    },
    components: {
      PopupPicker,
      multiple
    }
  }
</script>

<style lang="less" scoped>
  @import "../../../assest/mixin";

  .brief-wrap {
    .wh(100%, 100%);
    background: @talent-bg-color;
    .edit-box {
      .wh(100%, auto);
      background: @talent-bg-color;
      .company-box {
        display: flex;
        align-items: center;
        margin-left: 3.2%;
        .wh(96.8%, 1.333rem);
        border-bottom: @talent-border-bottom;
        .titles {
          .size-color(0.427rem, rgba(51, 51, 51, 1));
        }
        .name {
          display: flex;
          align-items: center;
          margin-left: auto;
          margin-right: 0.32rem;
          .company {
            text-align: right;
            height: 0.6rem;
            line-height: 0.6rem;
            .size-color(0.427rem, rgba(51, 51, 51, 1));
          }
        }
        .company-name {
          .fj(center, flex-end);
          flex: 1;
          text-align: right;
          margin-right: 0.2rem;
          .wh(100%, 0.6rem);
          line-height: 0.6rem;
          .size-color(0.427rem, #ccc);
        }
      }
      .lend-box {
        margin-left: 3.2%;
        display: flex;
        align-items: center;
        .wh(96.8%, 1.28rem);
        background: @talent-bg-color;
        margin-left: 3.2%;
        .titles {
          .size-color(0.427rem, rgba(51, 51, 51, 1));
        }
        .lend-radio {
          display: flex;
          align-items: center;
          margin-left: auto;
          margin-right: 0.32rem;
          .lend {
            margin-right: 0.96rem;
          }
          .active /deep/ .van-radio__label {
            color: #FF8F33;
          }
        }
      }
    }
    .line-box {
      .wh(100%, 0.267rem);
      background: @talent-theme-bg-color;
    }
    .brief-box {
      display: flex;
      flex-direction: column;
      .wh(100%, 4.48rem);
      border-bottom: 0.027rem solid rgba(245, 245, 245, 1);
      .brief-con {
        margin: 0.32rem auto 0;
        .wh(9.36rem, 2.907rem);
        background: rgba(245, 245, 245, 1);
        .border-radius(0.08rem);
        .brief {
          .wh(9.04rem, 2.578rem);
          padding-left: 0.32rem;
          padding-top: 0.32rem;
          .size-color(0.373rem, rgba(51, 51, 51, 1));
          background: rgba(245, 245, 245, 1);
          border: none;
          resize: none;
        }
      }
    }
    .brief-address {
      padding-bottom: 0.28rem;
      .wh(100%, 3.28rem);
      border-bottom: 0.027rem solid rgba(245, 245, 245, 1);
      .address-box {
        display: flex;
        align-items: center;
        .wh(100%, 1.333rem);
        .area {
          margin-left: 0.32rem;
          .size-color(0.427rem, rgba(51, 51, 51, 1));
        }
        .address-title {
          flex: 1;
          display: flex;
          justify-content: flex-end;
          padding-right: 0.2rem;
          height: 0.6rem;
          line-height: 0.6rem;
          .size-color(0.427rem, rgba(51, 51, 51, 1));
        }
        .address-title /deep/ .vux-cell-primary .vux-popup-picker-placeholder {
          color: #CCCCCC;
        }
        .address-title /deep/ .vux-cell-primary .vux-popup-picker-value {
          color: rgba(51, 51, 51, 1);
        }
        .address-title /deep/ .weui-cell {
          flex: 1;
        }
        .address-title /deep/ .vux-popup-picker-select {
          text-align: right !important;
        }
        .pic {
          margin-right: 0.32rem;
          .wh(0.32rem, 0.32rem);
        }
      }
      .address-area {
        margin: 0.32rem auto 0;
        .wh(9.36rem, 1.6rem);
        background: rgba(245, 245, 245, 1);
        .border-radius(0.08rem);
        .address {
          .wh(9.04rem, 1.28rem);
          padding-left: 0.32rem;
          padding-top: 0.32rem;
          .size-color(0.373rem, rgba(51, 51, 51, 1));
          background: rgba(245, 245, 245, 1);
          border: none;
          resize: none;
        }
      }
    }
    .brief-pic {
      display: flex;
      flex-direction: column;
      .wh(100%, auto);
      .pic-title {
        margin-top: 0.453rem;
        margin-bottom: 0.2rem;
        margin-left: 0.32rem;
        .size-color(0.427rem, rgba(51, 51, 51, 1));
      }
    }

    .title {
      margin-top: 0.453rem;
      margin-left: 0.32rem;
      .size-color(0.427rem, rgba(51, 51, 51, 1));
    }
    .btn-box {
      padding-top: 1.133rem;
      padding-bottom: 1.933rem;
      text-align: center;
      .wh(100%, 1.173rem);
      .btn {
        .wh(7.2rem, 1.173rem);
        background: @talent-button-color;
        .border-radius(0.16rem);
        .size-color-weight(0.453rem, rgba(255, 255, 255, 1), 500);
      }
      .delete {
        margin-right: 0.28rem;
        .wh(2.453rem, 1.013rem);
        border: 0.027rem solid rgba(255, 143, 51, 1);
        background: @talent-bg-color;
        .border-radius(0.16rem);
        .size-color-weight(0.453rem, rgba(255, 143, 51, 1), 500);
      }
      .save {
        .wh(6.613rem, 1.067rem);
        background: @talent-button-color;
        .border-radius(0.16rem);
        .size-color-weight(0.453rem, rgba(255, 255, 255, 1), 500);
      }
    }
  }

</style>
